<template>
  <div class="dialog">
    <el-dialog
      :title="dialogTitle"
      :visible="dialogFormVisible"
      @close="dialogClose"
    >
      <el-form :model="stuForm" :rules="stuRules" ref="stuForm">
        <el-form-item label="头像" class="heads"> </el-form-item>

        <el-upload
          ref="uploadAvatar"
          action="http://chst.vip/students/uploadStuAvatar"
          :show-file-list="true"
          list-type="picture-card"
          name="headimgurl"
          :file-list="headList"
          :on-success="uploaderSuccess"
          :on-remove="removeAvatar"
          :limit="1"
          :multiple="false"
        >
          <i class="el-icon-plus"></i>
        </el-upload>

        <el-form-item label="姓名" prop="name">
          <el-input v-model="stuForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目地址" prop="productUrl">
          <el-input v-model="stuForm.productUrl" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="class">
          <el-input v-model="stuForm.class" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="stuForm.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-input v-model="stuForm.city" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学历" prop="degree">
          <el-input v-model="stuForm.degree" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="stuForm.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="HIDE_DIALOG">取 消</el-button>
        <el-button type="primary" @click="confirmClick('stuForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from "vuex";
import * as api from "../../api/index";
export default {
  data() {
    return {
      dialogInfo: {
        action: "add",
        successmsg: "增加成功",
        errormsg: "增加失败",
      },
      showAvatar: true,
      limt: 1,
      headList: [],
      ggg: [],
      stuRules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        productUrl: [
          { required: true, message: "请输入项目地址", trigger: "blur" },
        ],
        class: [{ required: true, message: "请输入班级", trigger: "blur" }],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        city: [{ required: true, message: "请输入城市", trigger: "blur" }],
        degree: [{ required: true, message: "请输入学历", trigger: "blur" }],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" },
        ],
      },
      stuForm: {
        name: "",
        productUrl: "",
        headimgurl: "",
        class: "",
        age: "",
        city: "",
        degree: "",
        description: "",
      },
      oldForm: {},
    };
  },
  computed: {
    ...mapState(["dialogFormVisible", "dialogTitle", "currentRow"]),
  },
  methods: {
    ...mapMutations([
      "SHOW_DIALOG",
      "HIDE_DIALOG",
      "CHANGE_DIALOGTITLE",
      "SET_CURRENTROW",
    ]),
    ...mapActions(["GET_PROLIST"]),
    uploaderSuccess(r) {
      if (r.state) {
        this.stuForm.headimgurl = r.headimgurl;
        if (this.dialogTitle === "编辑学员信息") {
          this.headList = [{ url: r.headimgurl }]
        }
      } else {
        this.$message.error("上传失败");
      }
    },
    removeAvatar(res) {},
    confirmClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.HIDE_DIALOG();
          //表单验证成功
          //发送请求
          //判断dialogTitle
          if (this.dialogTitle === "增加学员信息") {
            //发起增加请求
            api.addStulist(this.stuForm).then((res) => {
              if (res.data.state) {
                this.GET_PROLIST();
              } else {
                this.$message.error("增加失败");
              }
            });
          } else {
            //发起编辑请求
            api.eduit(this.stuForm).then((res) => {
              if (res.data.state) {
                this.GET_PROLIST();
              } else {
                this.$message.error("更新失败，数据不存在");
              }
            });
          }
        } else {
          this.$message.error("请将内容填写完整");
        }
      });
    },
    dialogClose() {
      //dialog关闭时触发，清空输入框的值
      this.HIDE_DIALOG(), (this.stuForm = this.oldForm);
      //清空回显头像数组
      this.headList = [];
      this.limt = 1;
    },
  },
  created() {
    this.oldForm = { ...this.stuForm }; //储存stuForm初始值
  },
  watch: {
    currentRow(newVal) {
      //数据回显
      this.stuForm = this.currentRow;
      //头像回显
      this.headList = [{ url: this.currentRow.headimgurl }];
      this.limt = 2;
    },
  },
};
</script>
<style>
.heads {
  position: relative;
}
/* .el-upload--picture-card {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 60px;
  left: 100px;
  line-height: 100px;
} */
.uploadAvatar i {
  font-size: 40px;
}
</style>